<template>
  <el-dialog title="更换校区/老师" :close-on-click-modal="false" :visible.sync="visible" class="cu-dialog cu-dialog_center" lock-scroll width="1000px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :rules="rules">
        <el-col :span="12">
          <el-form-item label="报名校区" prop="campusId">
            <el-select v-model="dataForm.campusId" placeholder="请选择" clearable filterable required :style="{ width: '100%' }" @change="handleChangeCampus" :loading="campusLoading" @focus="loadCampusOptions">
              <el-option v-for="(item, index) in campusOptions" :key="index" :label="item.fullName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参训老师" prop="teacherId">
            <el-select v-model="dataForm.teacherId" placeholder="请选择" clearable filterable required @change="handleChangeTeacher" :style="{ width: '100%' }">
              <el-option v-for="(item, index) in teacherOptions" :key="index" :label="item.teacherName" :value="item.teacherId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名" prop="teacherName">
            <el-input v-model="dataForm.teacherName" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input v-model="dataForm.position" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码" prop="mobile">
            <el-input v-model="dataForm.mobile" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证" prop="idCard">
            <el-input v-model="dataForm.idCard" placeholder="请输入" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-show="dataForm.tMessage">
          <el-form-item label="信息提示" prop="tMessage">
            <el-input v-model="dataForm.tMessage" class="error-tips" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="照片" prop="photo">
            <template>
              <el-image v-if="dataForm.photo != null" :src="'https://qiniu.anqinyun.com/' + dataForm.photo" style="max-width: 250px" fit="scale-down" lazy :preview-src-list="['https://qiniu.anqinyun.com/' + dataForm.photo]"></el-image>
            </template>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :disabled="dataForm.tMessage != ''">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'
import { changeNewTeacher } from '@/api/campus/train'
import { getCampusSelector } from '@/api/campus/campus'
import { getTeacherNoPagingList } from '@/api/campus/teacher'
export default {
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      dataForm: {
        id: '',
        campusId: undefined,
        teacherId: undefined,
        teacherName: undefined,
        tMessage: undefined,
        position: undefined,
        mobile: undefined,
        idCard: undefined,
        photo: undefined,
        teacherInfoId: undefined
      },
      rules: {
        campusId: [
          {
            required: true,
            message: '请选择师训项目',
            trigger: 'blur'
          }
        ],
        teacherId: [
          {
            required: true,
            message: '请选择参训老师',
            trigger: 'blur'
          }
        ]
      },
      campusOptions: [],
      teacherOptions: [],
      train: {},
      campusLoading: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit('search')
    },
    init(id, row) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        this.train = row
        this.loadCampusOptions()
      })
    },
    async loadCampusOptions() {
      try {
        this.campusLoading = true
        var param = {
          fields: 'id,fullName',
          status: 'normal,preparation'
        }
        if (this.train.trainBrand != null) {
          param.brand = Array.isArray(this.train.trainBrand) ? this.train.trainBrand.join(',') : this.train.trainBrand
        }
        if (this.train.trainPushCampus != null) {
          param.provinceId = Array.isArray(this.train.trainPushCampus) ? this.train.trainPushCampus.join(',') : this.train.trainPushCampus
        }

        const res = await getCampusSelector(param)
        const list = Array.isArray(res.data) ? res.data : []
        this.campusOptions = list
      } catch (err) {
        console.error('加载校区下拉选项失败:', err)
        this.$message.error('校区选项加载失败')
        this.campusOptions = []
      } finally {
        this.campusLoading = false
      }
    },
    dataFormSubmit() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          changeNewTeacher({
            id: this.dataForm.id,
            campusId: this.dataForm.campusId,
            teacherId: this.dataForm.teacherId
          }).then(res => {
            this.$message({
              message: res.msg,
              type: 'success',
              duration: 1000,
              onClose: () => {
                this.$emit('refresh', true)
                this.closeDialog()
              }
            })
          })
        }
      })
    },
    handleChangeCampus() {
      request({
        url: `api/train/order/${this.train.trainId || ''}/${this.dataForm.campusId}`,
        method: 'get'
      }).then(res => {
        this.teacherOptions = res.data.teachers.filter(i => i.status != 'No' && i.status != 'Audit')
      })
    },
    handleChangeTeacher(val) {
      if (!val) {
        this.dataForm.teacherName = undefined
        this.dataForm.mobile = undefined
        this.dataForm.position = undefined
        this.dataForm.idCard = undefined
        this.dataForm.photo = undefined
        this.dataForm.tMessage = undefined
        this.dataForm.teacherInfoId = undefined
      } else {
        let teacher = this.teacherOptions.filter(o => o.teacherId == val)[0]
        this.dataForm.teacherName = teacher.teacherName
        this.dataForm.mobile = teacher.mobile
        this.dataForm.position = teacher.position
        this.dataForm.idCard = teacher.idCard
        this.dataForm.photo = teacher.idPhoto
        this.dataForm.tMessage = teacher.message
        this.dataForm.teacherInfoId = teacher.teacherInfoId
      }
    },
    closeDialog() {
      this.$refs['elForm'].resetFields()
      this.visible = false
    }
  }
}
</script>
<style lang="scss">
.error-tips {
  input {
    &.el-input__inner {
      color: red;
    }
  }
}
</style>
